<template>
  <div class="page">
    <m-header :title="CustomerService.customer_service" :canback="Boolean(1)">
      <span @click="goTo('CustomerService')">{{CustomerService.submitting_problem}}</span>
    </m-header>
    <div class="body">
      <ul class="wrap" v-lazy-load="lazyLoad" :style="'height:'+(screenHeight-85)+'px;overflow:auto;'">
        <li class="list">
          <span>{{CustomerService.question_number}}</span>
          <span>{{CustomerService.tj_date}}</span>
          <span></span>
        </li>
        <li class="list" v-for="(item,index) in messageInfo" :key="index">
          <span>{{item.id}}</span>
          <span>{{item.create_time}}</span>
          <span>
            <div @click="see(item.id)" class="see">{{CustomerService.view_question}}</div>
          </span>
        </li>
        <li class="listNo" v-if="noMore ||messageInfo.length < 15">{{MyTeam.no_more}}~</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { Owner } from "@/server/server.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      messageInfo: [],
      num: null,
      page: 1,
      noMore: false,
      screenHeight: 667,
      CustomerService: {},
      MyTeam: {},
    };
  },
  computed: {
    ...mapGetters(["lang"])
  },
  created() {
    this.CustomerService = this.lang.CustomerService;
    this.MyTeam = this.lang.MyTeam;
    this.messageRecord();
    this.screenHeight = window.screen.availHeight;
  },
  methods: {
    messageRecord() {
      Owner.messageRecord({page:this.page,num:15}).then(res => {
        if (res.code == 1) {
          if(res.data.page > res.data.allPage) {
            this.noMore = true;
          }
          this.messageInfo = this.messageInfo.concat(res.data.message);
        }
      });
    },
    see(id) {
      this.$router.push({ name: "ViewQuestions", params: { id: id} });
    },
    goTo(name) {
      this.$router.push({ name: name });
    },
    lazyLoad() {
      this.page = this.page + 1;
      if (!this.noMore) {
        // this.loadGif = true;
        this.messageRecord();
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  padding: 15px;
  background-color: white;
  .wrap {
    margin-top: 30px;
    // border: 1px solid #eee;
    border-radius: 10px;
    .list {
      padding: 24px 0;
      .display-flex();
      border: 1px solid #eee;
      .see {
        display: inline;
        padding: 10px 20px;
        background: #406ec3;
        border-radius: 5px;
        color: #fff;
      }
      > span {
        flex: 1;
        text-align: center;
      }
    }
    .listNo {
      padding: 15px 0;
      text-align: center;
    }
  }
}
</style>